import { useEffect, useRef } from 'react';
import { fadeIn, scaleIn } from '../../../utils/animations';
import gsap from 'gsap';

export const useAnimation = () => {
  const cardRef = useRef<HTMLDivElement | null>(null);
  const uploadRef = useRef<HTMLDivElement | null>(null);
  const upload2Ref = useRef<HTMLDivElement | null>(null);
  const generateRef = useRef<HTMLButtonElement | null>(null);

  // 组件挂载时的动画
  useEffect(() => {
    if (cardRef.current) {
      fadeIn(cardRef.current, { delay: 0.2 });
    }
    if (uploadRef.current) {
      scaleIn(uploadRef.current, { delay: 0.4 });
    }
    if (generateRef.current) {
      scaleIn(generateRef.current, { delay: 0.6 });
    }

    // 设置上传区域的初始倾斜角度
    const tileElement = uploadRef.current?.querySelector(".upload-tile");
    if (tileElement) {
      gsap.set(tileElement, {
        rotationZ: -8,
        scale: 1,
      });
    }
  }, []);

  // 发送按钮点击动画
  const handleSendClick = (callback: () => void) => {
    if (!generateRef.current) {
      callback();
      return;
    }
    
    const svgElement = generateRef.current.querySelector('svg');
    
    if (svgElement) {
      // 创建箭头向上飞出边界的动画
      gsap.to(svgElement, {
        y: -60, // 向上飞出边界
        duration: 0.8,
        ease: "power2.out",
        onComplete: () => {
          // 飞出后立即从下面重新出现
          gsap.set(svgElement, {
            y: 60 // 从下面开始
          });
          
          // 从下面回到中间
          gsap.to(svgElement, {
            y: 0,
            duration: 0.3,
            ease: "power2.out"
          });
        }
      });
    }
    
    // 执行回调
    callback();
  };

  return {
    cardRef,
    uploadRef,
    upload2Ref,
    generateRef,
    handleSendClick
  };
};
